<template>
  <je-modal
    v-model:visible="visible"
    class="data-dictionary-high-config"
    width="600px"
    :title="title"
    height="auto"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
    <je-form
      ref="formRef"
      class="form"
      :rules="rules"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <je-form-item label="选项可编辑" name="editDic">
        <je-switch v-model:value="formState.editDic" mode="checkbox" />
        <span class="prompt">启用后用户可对字典项进行编辑。 </span>
      </je-form-item>
      <je-form-item label="链接名" name="editDicText" v-bind="validateInfos.editDicText">
        <je-input v-model:value="formState.editDicText" />
      </je-form-item>
      <je-form-item label="链接图标" name="editDicIcon">
        <je-icon v-model:value="formState.editDicIcon" />
      </je-form-item>
      <je-form-item label="图标颜色" name="editDicIconColor">
        <je-color v-model:value="formState.editDicIconColor" />
      </je-form-item>
      <je-form-item label="激活颜色" name="editDicIconHoverColor">
        <je-color v-model:value="formState.editDicIconHoverColor" /> </je-form-item
      ><je-form-item label="任何人可编辑" name="editDicCommon">
        <je-switch v-model:value="formState.editDicCommon" mode="checkbox" />
        <span class="prompt">启用后所有用户全可以编辑该字典项。 </span>
      </je-form-item>
      <je-form-item label="指定角色编辑" name="editDicPermText">
        <!-- <div class="inputWrap">
          <je-input v-model:value="formState.editDicPerm" />
          <i class="setIcon fal fa-cog"></i>
        </div> -->
        <je-tree-select
          v-model:value="formState.editDicPermText"
          name="editDicPermText"
          config-info="JE_RBAC_ROLETREE,editDicPerm~editDicPermText,id~text,M"
          :querys="permArr"
          :select-options="selectOptions"
        />
      </je-form-item>
    </je-form>
  </je-modal>
</template>

<script>
  import { ref, toRefs, reactive, defineComponent, onMounted } from 'vue';
  import { Modal, Icon, Color, Form, Input, Switch, InputSelect } from '@jecloud/ui';
  import { encode, decode } from '@jecloud/utils';
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'DataDictionaryHighConfig',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeSwitch: Switch,
      JeIcon: Icon,
      JeColor: Color,
      JeTreeSelect: InputSelect.Tree,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['changeModal'],
    setup(props, { emit }) {
      const state = reactive({
        visible: props.visble,
        title: props.recordData.title,
        formRef: ref(),
        formState: props.recordData,
        labelCol: {
          style: { width: '100px' },
        },
        permArr: [{ code: 'ROLERANK', type: '=', value: 'SYS' }],
        wrapperCol: {},
        rules: {
          editDicText: [{ required: true, message: '请输入链接名', trigger: 'blur' }],
        },
      });

      const { validateInfos, validate } = useForm(state.formState, state.rules, {
        onValidate: (...args) => console.log(...args),
      });
      const selectOptions = {
        selectExp: "'{nodeInfoType}' != 'folder'",
        title: '选择指定角色编辑',
      };
      const methods = {
        handleClose() {
          state.visible = false;
          emit('changeModal', { isShow: false });
        },

        handleOk() {
          validate().then(() => {
            const {
              editDic,
              editDicText,
              editDicIcon,
              editDicIconColor,
              editDicIconHoverColor,
              editDicCommon,
              editDicPerm,
              editDicPermText,
            } = state.formState;

            const otherCfgs = state.formState.otherCfgs;

            otherCfgs.editDic = editDic;
            otherCfgs.editDicText = editDicText;
            otherCfgs.editDicIcon = editDicIcon;
            otherCfgs.editDicIconColor = editDicIconColor;
            otherCfgs.editDicIconHoverColor = editDicIconHoverColor;
            otherCfgs.editDicCommon = editDicCommon;
            otherCfgs.editDicPerm = editDicPerm;
            otherCfgs.editDicPermText = editDicPermText;

            state.visible = false;
            emit('changeModal', {
              type: 'DataDictionaryHighConfig',
              visible: false,
              data: {
                RESOURCEFIELD_OTHERCONFIG: encode(otherCfgs),
              },
            });
          });

          return false;
        },
      };

      onMounted(() => {
        const { RESOURCEFIELD_OTHERCONFIG } = state.formState;

        const otherCfgs = decode(RESOURCEFIELD_OTHERCONFIG ?? '{}') ?? {};
        state.formState.otherCfgs = otherCfgs;
        state.formState.editDic = otherCfgs.editDic;
        state.formState.editDicText = otherCfgs.editDicText || '编辑选项';
        state.formState.editDicIcon = otherCfgs.editDicIcon || 'jeicon jeicon-edit';
        state.formState.editDicIconColor = otherCfgs.editDicIconColor || '#ebebeb';
        state.formState.editDicIconHoverColor = otherCfgs.editDicIconHoverColor || '#3265f5';
        state.formState.editDicCommon = otherCfgs.editDicCommon;
        state.formState.editDicPerm = otherCfgs.editDicPerm;
        state.formState.editDicPermText = otherCfgs.editDicPermText;
      });

      return {
        ...toRefs(state),
        ...methods,
        validateInfos,
        selectOptions,
      };
    },
  });
</script>
<style lang="less" scoped>
  .data-dictionary-high-config {
    .inputWrap {
      position: relative;
      .setIcon {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translate(0, -50%);
        cursor: pointer;
      }
    }
    .prompt {
      margin: 0 0 0 10px;
      font-size: 14px;
      color: #2a6fd0;
      vertical-align: top;
    }
  }
</style>
